<template>
  <div style="height: 100%;background-color:white">
    <el-row style="margin-bottom: 10px">

      <el-col :span="24" style="right: auto">
        <div>
          <div style="width: 430px; float: right">
            <el-input v-model="name" placeholder="请输入题目" size="small" @keyup.enter.native="getTableData">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" :icon="appendIcon" @click="switchAppend"></el-button>
            </el-input>
          </div>
          <div v-if="showAdvance" id="advance" style="padding: 10px; float: right">
            <div>
              <div>
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>题目类型</span>
                </div>
                <div style="display: inline-block">
                  <el-input v-model="tagName" placeholder="请输入题目类型" size="small"
                            style="width: 300px;margin-top: 10px"></el-input>
                </div>
              </div>
              <div>
                <div style="width: 100px;text-align:right; display: inline-block">
                  <span>习题来源</span>
                </div>
                <div style="display: inline-block">
                  <el-input v-model="tagName" placeholder="请输入习题来源" size="small"
                            style="width: 300px;margin-top: 10px"></el-input>
                </div>
              </div>
            </div>
            <div style="margin-top: 60px; right: 10px;">
              <el-row>
                <el-col :offset="7" :span="9">
                  <div style="margin-left: 90px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                  </div>
                </el-col>
                <el-col :offset="0.8" :span="2">
                  <div div style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="replacement">重 置</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div div style="margin-left: 5px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData" :height="tableHeight" border highlight-current-row stripe style="width: 100%;"
                @selection-change="handleSelectionChange">
        <el-table-column
          v-model="multipleSelection"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="序号" min-width="200" prop="name">
        </el-table-column>
        <el-table-column label="题型" min-width="150" prop="categoryStr"></el-table-column>
        <el-table-column label="题目" min-width="150" prop="isbn"></el-table-column>
        <el-table-column label="答案" min-width="150" prop="version"></el-table-column>
        <el-table-column label="来源" min-width="100" prop="version"></el-table-column>
        <el-table-column label="章节" min-width="100" prop="version"></el-table-column>
        <el-table-column label="导入者" min-width="100" prop="version"></el-table-column>
        <el-table-column label="导入时间" min-width="150" prop="createdTime"></el-table-column>

      </el-table>
    </el-row>
    <el-row>
      <div style="margin-top: 10px">
        <el-pagination
          v-if="multiplePages"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          :total="totalNum"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ShowExercise",
  data() {
    return {
      startIndex: 0,
      endIndex: 0,
      appendIcon: "el-icon-caret-bottom",
      currentPage: 0,
      pageSize: 10,
      tableData: [],
      totalNum: 0,
      multipleSelection: [],
      multiplePages: true,
      uploadVisible: false,
      editDialogVisible: false,

    }
  },
  methods: {
    handleCurrentChange: function (val) {
      this.currentPage = val - 1;
      this.getTableData();
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getTableData()
    },
    advanceCancel() {
      this.showAdvance = false;
    },
    replacement: function () {

    },
    advanceConfirm() {
      this.getTableData();
      this.showAdvance = false;
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    editConfirm() {

    },
    getTableData: function () {
    }
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 140;

  }
}
</script>

<style scoped>

</style>
